<template>
  <a-list itemLayout="horizontal" :dataSource="data">
    <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
      <a-list-item-meta>
        <a slot="title">{{ item.title }}</a>
        <span slot="description">
          <span class="security-list-description">{{ item.description }}</span>
          <span v-if="item.value">:</span>
          <span class="security-list-value">{{ item.value }}</span>
        </span>
      </a-list-item-meta>
      <template v-if="item.actions">
        <a slot="actions" @click="item.actions.callback">{{ item.actions.title }}</a>
      </template>
    </a-list-item>
  </a-list>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          title: '商户ID',
          description: '商户ID，系统自动生成，不可变更',
          value: this.$store.getters.userInfo.merchantId
        },
        {
          title: '商户Key',
          description: '商户Key，请勿泄露给第三方，由此可能会导致资金安全等问题',
          value: this.$store.getters.userInfo.merchantKey
        }
        // {
        //   title: '接入网址',
        //   description: '商户接入的下发API',
        //   value: '暂未设置',
        //   actions: {
        //     title: '设置',
        //     callback: () => {
        //       this.$message.success('此功能暂未开放')
        //     }
        //   }
        // },
        // {
        //   title: '网站名称',
        //   description: '商户网站名称',
        //   value: '暂未设置',
        //   actions: {
        //     title: '设置',
        //     callback: () => {
        //       this.$message.success('此功能暂未开放')
        //     }
        //   }
        // }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.security-list-value {
  color: #333;
  font-weight: 500;
  padding-left: 20px;
}

.security-list-value {
  color: #1890ff;
  letter-spacing: 1px;
}
</style>
